<template>
  <div class="navbar">
    <div class="navbar_item1"><slot name="left"></slot></div>
    <div class="navbar_item2"><slot name="center"></slot></div>
    <div class="navbar_item3"><slot name="right"></slot></div>
  </div>
</template>
<script>
export default {};
</script>
<style>
.navbar {
  display: flex;
  height: 44px;
  /*1. background-color: pink;
  font-size: 20px;  这个组件因为其他的地方还要用，则颜色，字体大小，颜色都不要在这里写死，（其他的地方这些样式不一样）在当前用到这个组件的地方设置这些样式 */
  line-height: 44px;
  text-align: center;
}
.navbar_item1,
.navbar_item3 {
  width: 60px;
  height: 44px;
}
.navbar_item2 {
  flex: 1;
  height: 44px;
}
/* 2.注意： display: flex;
flex: 1;的用法，这里是1，3除外，2独自分布剩下的空间

 display: flex;写在父盒子
 flex: 1写在子盒子*/
</style>
